<template>
  <div>
    <div>
      <myHeader></myHeader>
    </div>
    <!-- 两句诗 -->
    <div v-show="showTwoPoem" class="my-animation-slide-top">
      <twoPoem :isHitokoto="false"></twoPoem>
    </div>
    <div v-show="!$common.isEmpty(listDatas)" class="video-container">
   
        <div class="video-item-wrap">
          <div v-for="(item, index) in listDatas" :key="index" @click="toUrl(item)" class="video-item">
            <img class="index-video" :src="$constant.resBaseURL + item.path">
            <div style="width: 100%">
              <div class="video-item-title">
                {{ item.name }}
              </div>
              <div class="video-item-introduction">
                {{ item.createTime }}
              </div>
            </div>
          </div>
        </div>
     
    </div>
  </div>
</template>
   
<script>
const myHeader = () => import("../common/myHeader");
const twoPoem = () => import("../common/twoPoem");

export default {
  components: {
    myHeader,
    twoPoem
  },
  data() {
    return {
      showTwoPoem: true,
      listDatas: []
    }
  },
  created() {
    var type = this.$route.query.type;
    this.getVideoList(type);
  },
  methods: {
    toUrl(item) {
      var { href } = this.$router.resolve({
        name: 'toolVideoDetail',
        query: {
          title: item.name,
        }
      });
      localStorage.setItem("videoUrl", this.$constant.resBaseURL + item.pathSub)
      window.open(href, '_blank');
    },
    getVideoList(type) {
      this.$http.get(this.$constant.baseURL + "/webInfo/listResourceByType/" + type)
        .then((res) => {
          if (!this.$common.isEmpty(res.data)) {
            this.showTwoPoem = false;
            this.listDatas = res.data;
          }
        })
        .catch((error) => {
          this.$message({
            message: error.message,
            type: "error"
          });
        });
    }
  },
}
</script>
   
<style scoped>
.video-container {
  padding: 25px;
  background: var(--favoriteBg);
}

.index-video {
  width: 100%;
  height: 56.25% * w;
  object-fit: cover;
}

.video-item-wrap {
  display: flex;
  flex-wrap: wrap;
}

.video-item {
  transition: all 0.3s;
  border-radius: 12px;
  box-shadow: 0 8px 16px -4px #2c2d300c;
  background: var(--background);
  width: calc(100% / 4 - 20px);
  max-width: 353px;
  overflow: hidden;
  padding: 15px;
  cursor: pointer;
  margin: 10px;
}

.video-item:hover {
  background: #DE5847;
  color: var(--white);
}

.video-item:hover .video-item-image {
  transition: all 0.6s;
  width: 0 !important;
  height: 0 !important;
  opacity: 0;
  margin-right: 0;
}

.video-item:hover div:nth-child(2) {
  width: 100% !important;
}

.video-item-title {
  font-size: 19px;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 5px;
}

.video-item-introduction {
  opacity: 0.7;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


@media screen and (max-width: 900px) {
  .video-item {
    width: calc(100% / 3 - 20px);
  }
}

@media screen and (max-width: 700px) {
  .video-item {
    width: calc(100% / 2 - 20px);
  }
}

@media screen and (max-width: 400px) {
  .video-item {
    width: calc(100% - 20px);
  }
}
</style>   